<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>节点获取</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <style>
        .layui-card-body .layui-table {
            margin: 0;
        }

        .kaige-body {
            background-color: #f2f2f2;
        }

        form.kaige-body {
            background-color: #fff;
            padding: 0;
        }

        .layui-elem-quote {
            margin-bottom: 5px;
            padding: 12px;
            line-height: 1;
            border-left: 5px solid #04469c;
            border-radius: 0;
            background-color: #2680cf;
            color: #fff;
        }

        .layui-elem-quote2 {
            margin-bottom: 5px;
            padding: 12px;
            line-height: 1;
            border-left: 5px solid #095198;
            border-radius: 0;
            background-color: #cee8ff;
            color: #333;
        }

        .layui-card-header {
            height: 40px;
            line-height: 40px;
            padding: 0 5px;
            border-radius: 0;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="kaige-body layui-form">
        <div class="layui-row layui-col-space5">
            <div class="layui-col-xs5">
                <div class="layui-card">
                    <blockquote class="layui-elem-quote layui-text">
                        系统字典(选项)
                    </blockquote>
                    <div class="layui-card-header">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm" title="添加" id="btn_add">
                                <i class="layui-icon layui-icon-add-circle"></i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm" title="刷新" id="btn_refresh">
                                <i class="layui-icon layui-icon-refresh"></i>
                            </button>
                        </div>
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm" title="全展开" id="all_open">
                                <i class="layui-icon layui-icon-down"></i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm" title="全收缩" id="all_close">
                                <i class="layui-icon layui-icon-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="layui-card-body" style="padding: 3px;">
                        <table class="layui-table" id="dictTable" lay-filter="dictTable" lay-size="sm"></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs7">
                <div class="layui-card">
                    <blockquote class="layui-elem-quote2 layui-text" id="dictItemTitle">
                        详细信息
                    </blockquote>
                    <div class="layui-card-header">
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn layui-btn-sm" title="提交保存" id="btn_form_save">
                                <i class="fa fa-save"></i> 保存
                            </button>
                        </div>
                    </div>
                    <div class="layui-card-body" style="padding: 3px;background-color: #fff;">
                        <div id="dictItemForm"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        load_init_js([
            szoapcpath + '/static/kaige/js/xm-select.js',
        ], function () {
            layui.config({
                base: szoapcpath + '/static/kaige/layuiextend/'
            }).use(['form', 'layer', 'table', 'element', 'kaige', 'tableTreeDj', 'laytpl'], function () {
                var form = layui.form, layer = layui.layer, table = layui.table, element = layui.element, $ = layui.$, kaige = layui.kaige, tableTree = layui.tableTreeDj, laytpl = layui.laytpl;

                var treeData, xmdom;
                const cols = [[
                    { field: 'name', title: '名称' },
                    { field: 'code', title: '编码', width: 150 },
                    { field: 'id', title: 'ID', width: 70 },
                    { title: '操作', toolbar: '#dtrbar', align: 'center', width: 90, fixed: 'right' }
                ]];
                //表格参数配置
                const objTable = {
                    elem: '#dictTable'
                    , url: "/sys.dict/index"
                    , cols: cols
                    , id: 'dictTable'
                    , loading: true
                    , height: 'full-120'
                    , escape: false
                    , done: function (res, curr, count) {
                        treeData = res.data;
                    }
                };
                //树型参数配置 （详看默认配置进行更改）
                const objTree = {
                    defaultShow: true,
                    keyId: "id",
                    keyPid: "pid",
                    title: "name"
                }

                //渲染表格
                tableTree.render(objTable, objTree);
                //清除缓存
                tableTree.cache(tableTree.getShowCache(), []);

                $('#all_open').on('click', function () {
                    tableTree.showAll(objTable);
                });
                $('#all_close').on('click', function () {
                    tableTree.hideAll(objTable);
                });

                $('#btn_add').on('click', function () {
                    btn_add();
                });

                $('#btn_refresh').on('click', function () {
                    location.reload();
                });

                $('#btn_form_save').on('click', function (e) {
                    $('#kaige_form_btn_save').click();
                    console.log('点了');
                    return false;
                });

                //监听行单击事件（双击事件为：rowDouble）
                table.on('rowDouble(dictTable)', function (obj) {
                    bar_edit(obj);
                });

                //监听行工具事件
                table.on('tool(dictTable)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'edit':
                            bar_edit(obj);
                            break;
                        case 'del':
                            bar_del(data);
                            break;
                    }
                });

                //删除
                function bar_del(d) {
                    layer.confirm('如果有子项会一并删除，您确定删除吗？', {
                        title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
                        btn: ['确认', '取消']
                    }, function () {
                        $.post("/sys.dict/del", { id: d.id }, function (res) {
                            res.status && tableTree.reload(objTable);
                            layer.msg(res.msg);
                        });
                    });
                };

                function bar_edit(obj) {
                    var data = obj.data;
                    //如果锁定，不能提交
                    if (data.is_lock === 1) {
                        layer.msg('系统已锁定的不能编辑');
                        return false;
                    }
                    //标注选中样式
                    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                    if (data.is_lock === 1) {
                        $('#btn_form_save').hide();
                        $('#dictItemTitle').html(treePath(data.id) + ' [已锁定，编辑无效]');
                    } else {
                        $('#btn_form_save').show();
                        $('#dictItemTitle').html(treePath(data.id) + ' [编辑]');
                    }
                    kaige.form({
                        opentype: 'dom'  // 写dom 非弹窗 必填此项
                        , url: '/sys.dict/edit' //数据源
                        , data: { id: data.id }
                        , box: 'dictItemForm'
                        , id: 'kaige'
                        , encode : 1
                        , callbefore: function () {
                            //上级
                            kaige.xmSelect({
                                id: 'dict_id',
                                udata: { automatch: 1 },
                                url: '/select/dict',
                                radio: true,
                                clickClose: true
                            });
                            settopdict();
                        }
                        , callback: function (res) {
                            // res.status && tableTree.reload(objTable);
                        }
                    });
                }

                function btn_add() {
                    $('#dictItemTitle').html('字典 [添加]');
                    $('#btn_form_save').show();
                    // 使用 kaige.form 表单里标识及tpl的ID前缀必须是 kaige id:'kaige'
                    kaige.form({
                        opentype: 'dom'  // 写dom 非弹窗 必填此项
                        , url: '/sys.dict/add' //数据源
                        , box: 'dictItemForm'
                        , id: 'kaige'
                        , encode : 1
                        , callbefore: function () {
                            //上级
                            kaige.xmSelect({
                                id: 'dict_id',
                                udata: { automatch: 1 },
                                url: '/select/dict',
                                radio: true,
                                clickClose: true
                            });
                            settopdict();
                        }
                        , callback: function (res) {
                            // res.status && tableTree.reload(objTable);
                        }
                    });
                }

                // 字典路径
                function treePath(id) {
                    var arr1 = getParentIdList(treeData, id);
                    var path = '';
                    layui.each(arr1, function (index, item) {
                        var str = item.name;
                        if (typeof (str) === 'string') {
                            str = str.replace(new RegExp('&nbsp;', "gm"), '');
                            str = str.replace(/<\/?.+?\/?>/gm, '');
                            path += (index > 0 ? ' <i class="fa fa-angle-right"></i> ' : '') + str;
                        }
                    });
                    return path;
                }

                //找所有父级
                function getParentIdList(data2, nodeId2) {
                    var arrRes = [];
                    if (data2.length == 0) {
                        if (nodeId2) {
                            arrRes.unshift({ id: data2.id, name: data2.name });
                        }
                        return arrRes;
                    }
                    function rev(data, nodeId) {
                        for (var i = 0, length = data.length; i < length; i++) {
                            var node = data[i];
                            if (node.id == nodeId) {
                                arrRes.unshift({ id: node.id, name: node.name });
                                if (node.pid >= 0) {
                                    rev(data2, node.pid);
                                }
                                break;
                            }
                        }
                        return arrRes;
                    };
                    arrRes = rev(data2, nodeId2);
                    return arrRes;
                }

                //设置顶级类型
                function settopdict() {
                    $('#settopdict').on('click', function () {
                        xmdom.setValue([]);
                        $('#dict_id_name').val('顶级类型');
                        $('#dict_id').val(0);
                    });
                }
            });
        });
    </script>
    <script type="text/html" id="dtrbar">
        <div class="layui-btn-group">
            {{# if(d.is_lock != 1){ }}
            <button type="button" class="layui-btn layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>        
            <button type="button" class="layui-btn layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
            {{# } }}
        </div>
    </script>

    <script id="kaige_form_html" type="text/html">
        <form class="kaige-body layui-form layui-form-pane" lay-filter="kaige_form_lay_filter">
        {{# if(d.id){ }}
        <input type="hidden" name="id" value="{{ d.id }}" />
        {{# } }}
        <div class="layui-form-item">
          <label class="layui-form-label">上级</label>
          <div class="layui-input-inline">
            <div id="dict_id_select_box"></div>
            <input type="hidden" id="dict_id" value="{{ d.pid || '' }}" name="pid" />
          </div>
          <label class="layui-form-label">设为顶级</label>
          <div class="layui-input-inline">
            <button type="button" id="settopdict" class="layui-btn layui-btn-sm" style="margin-top:3px;margin-left: 5px;">
              <i class="fa fa-angle-double-up"></i> 设置为顶级
            </button>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">名称</label>
          <div class="layui-input-inline">
            <input type="text" name="name" required lay-verify="required" value="{{ d.name || '' }}" placeholder="请输入名称" autocomplete="off" class="layui-input" />
          </div>
          <label class="layui-form-label">编码</label>
          <div class="layui-input-inline">
            <input type="text" name="code" required lay-verify="required" value="{{ d.code || '' }}" placeholder="请输入编码" autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">值</label>
          <div class="layui-input-inline">
            <input type="text" name="value" required lay-verify="required" value="{{ d.value || '' }}" autocomplete="off" class="layui-input" />
          </div>
          <label class="layui-form-label">所属单位</label>
          <div class="layui-input-inline">
            <select name="company_id" lay-filter="company_id" id="company_id">
              <option value="">选择单位</option>
              {{#  layui.each(d.companyList, function(index, item){ }}
              <option value="{{ item.id }}"  {{#  if(d.company_id && item.id == d.company_id ){ }} selected {{#  } }} >{{ item.name }}</option>
              {{#  }); }}
            </select>
          </div>
        </div>
      
        <div class="layui-form-item">
          <label class="layui-form-label">父类名称</label>
          <div class="layui-input-inline">
            <input type="text" id="dict_id_name" value="{{ d.pid_name || '' }}" readonly="true" autocomplete="off" class="layui-input layui-disabled" />
          </div>
          <label class="layui-form-label">排序</label>
          <div class="layui-input-inline">
            <input type="text" name="sort" class="layui-input" value="{{ typeof(d.sort)==='number' ? d.sort: '' }}" />
          </div>
        </div>
      
        <div class="layui-form-item">
          <label class="layui-form-label">锁定</label>
          <div class="layui-input-inline border3">
            <input type="checkbox" name="is_lock" lay-skin="switch" lay-text="已锁定|未锁定" {{#  if(d.is_lock ==1 ){ }} checked {{#  } }} />
          </div>
          <label class="layui-form-label">类别</label>
          <div class="layui-input-inline border3">
            <input type="checkbox" name="type" lay-skin="switch" lay-text="系统|应用" {{#  if(d.type ==1 ){ }} checked {{#  } }} />
          </div>
        </div>
      
        <div class="layui-form-item">
          <label class="layui-form-label">说明</label>
          <div class="layui-input-block">
            <textarea name="explain" class="layui-textarea" style="height: 150px;">{{ d.explain || '' }}</textarea>
          </div>
        </div>
      
        <div class="layui-form-item">
          <label class="layui-form-label">操作人</label>
          <div class="layui-input-inline">
            {{#  if(d.handle_name !== undefined  && d.handle_name !== ''){ }}
            <input value="{{ d.handle_name }}" class="layui-input layui-disabled" type="text" readonly>
            {{# }else{ }}
            <input value="{{ d.userInfo.real_name || '' }}" class="layui-input layui-disabled" type="text" readonly>
            {{#  } }}
          </div>
          <label class="layui-form-label">操作时间</label>
          <div class="layui-input-inline">
            <input value="{{ d.handle_time || '' }}" class="layui-input layui-disabled" type="text" readonly>
          </div>
        </div>
        <div class="layui-form-item layui-hide">
            <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
        </div>
    </form>
  </script>
</body>

</html>